<template>
  <div
    :style="{ 'margin-top': top, 'padding-left': spacing,
              'padding-right': spacing }"
    class="specialArea"
  >
    <van-pull-refresh
      id="specialIndex"
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        :immediate-check="false"
        :offset="20"
        @load="onLoad"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="content-list"
        >
          <div class="img-container">
            <label-comp v-if="labelObj!==undefined" :label-list="item.labelList" class-name="my-tag" />
            <van-image
              class="one"
              :src="item.coverImgIdURL"
              :fit="imgType"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="../../images/base/default-placeholder.png" alt>
              </template>
            </van-image>
          </div>
          <span class="two">{{ item.name }}</span>
          <span v-if="item.startTime && item.endTime" class="three">{{ item.startTime }}至{{ item.endTime }}</span>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import mixins from '../mixins'
import mixin from './mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

export default {
  name: 'SpecialArea',
  components: { LabelComp },
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      isLoadError: false,
      isNoData: false,
      defaultList: [
        {
          name: '健康专区',
          startTime: '2022-11-16',
          endTime: '2022-11-30',
          areaStatus: 1,
          coverImgIdURL: ''
        },
        {
          name: '健康专区',
          areaStatus: 2,
          coverImgIdURL: ''
        }
      ],
      labelObj: undefined
    }
  },

  async created() {
    if (this.isInitData) {
      this.labelObj = await this.getLabelList()
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      const res = result.dataList
      const { rows, total } = res.data || {}
      this.list.push(...rows)
      this.loading = false
      this.isLoading = false
      this.isNoData = total < 1
      if (this.isNoData) {
        this.finishedText = ''
      } else {
        this.finishedText = '已经到底了'
      }
      if (this.list.length >= total) {
        this.finished = true
      } else {
        this.finished = false
      }
      if (this.labelObj !== undefined) {
        this.setLabel(this.list, 'list')
      }
    },
    /**
     * 刷新
     */
    onRefresh() {
      this.finished = false
      this.page = 1
      this.list = []
      this.getDataByCode('dataList')
    },

    /**
     * 上拉加载
     */
    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.getDataByCode('dataList')
      } else {
        this.loading = false
      }
    }

  }
}
</script>

<style lang='scss'>
@import "@/styles/utility/rem.scss";

.specialArea {
  width: 100%;
  height: 100%;

  .content-list {
    width: 100%;
    background: #ffffff;
    border-radius: rem(16);
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: rem(20);
    padding-bottom: rem(28);
    .img-container {
      width: 100%;
      height: rem(310);
      position: relative;
      .one {
        display: block;
        width: 100%;
        height: rem(329);
        border-radius: rem(16) rem(16) 0 0;
        margin-top: rem(-16);
        img {
          border-radius: rem(54) rem(54) 0 0;
        }
        .van-image__error,
        .van-image__loading {
          border-radius: rem(16) rem(16) 0 0;
          > img {
            width: rem(120);
            height: rem(120);
          }
        }
      }
    }

    .two {
      font-size: rem(30);
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: left;
      color: #333333;
      margin-top: rem(22);
      margin-left: rem(22);
    }

    .three {
      font-size: rem(24);
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: left;
      color: #666666;
      margin-left: rem(22);
      margin-top: rem(22);
    }
  }
}
</style>
